<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Football Predict</title>
	<link rel="SHORTCUT ICON" href="images/icon/logo-in.png">
	<link href="css/style.css" rel="stylesheet"/>
	<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<!--<![endif]-->
	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css"href="css/style-ie8.css" />
	<![endif]-->

	<link href="css/menu.css" rel="stylesheet"/>

	<link rel="SHORTCUT ICON" href="images/icon/logo-head.png"/>
	<script src="scripts/jquery-1.8.3.min.js"></script>
	<script src="scripts/main.js"></script>

</head>
<body>
<?php
        // put your code here
        ?>
<div class="main">
	<div class="header">
		<div class="header-container home">
			<div class="header-menu">
				<ul class="menu-list">
					<li class="menu-item"><a href="#" id="menu-item1">Item 1</a></li>
					<li class="menu-item"><a href="#" id="menu-item1">Item 2</a></li>
					<li class="menu-item"><a href="#" id="menu-item1">Item 3</a></li>
					<li class="menu-item"><a href="#" id="menu-item1">Item 4</a></li>
				</ul>
			</div>
			<div class="header-logo">LOGO</div>
			<div class="header-log">
				<div class="btn-expand-login" id="expand-login-btn">Login</div>
				<div class="lbl-profile" id="profile-label">
					<span class="user-name">Username</span>
					<span class="user-avt" style="background-image: url('resources/avt/avt0.jpg')"></span></div>
			</div>
		</div>
	</div>
	<div class="cover home">
		<div class="cover-container home">
			<div class="cover-container-worldmap"></div>
		</div>
		<div class="cover-container-bottom">
			<p>Choose your competition</p>
			<span>Challenge your friends in one or more competitions!</span>
		</div>
	</div>
	<div class="page">
		<div class="page-container">
			<div class="page-cont-left home">


				<div class="page-home-frame">
					<div class="page-home-frame-item title"><span>Previous competitions on LetsPredict.it</span></div>
					<div class="page-home-frame-item link">
						<img src="http://letspredict.it/static/versioned-images/img/landing-page/eredivisie-logo-home.f3d646a9.png">
		                        <span><b>Eredivisie 2011-2012</b>
		                        500.000 participants</span></div>
					<div class="page-home-frame-item link">
						<img src="http://letspredict.it/static/versioned-images/img/landing-page/eurocup-logo-home.c0b4ae6c.png">
		                        <span><b>Euro2012</b>
			                        240.000 participants</span></div>
				</div>
				<div class="page-home-row">
					<div class="page-home-row-item">
						<span><b>Eredivisie</b>
Predict the matches between Ajax, AZ, PSV and the Eredivisie-new-entrant PEC Zwolle!</span>

						<div class="page-home-row-btn">Predict Eredivisie</div>
					</div>
					<div class="page-home-row-item">
						<span><b>Top League</b>
Predict the matches of top teams (such as Manchester United and Barcelona) in English, Italian, Spanish and German leagues.</span>

						<div class="page-home-row-btn">Predict Top League</div>
					</div>
					<div class="page-home-row-item">
						<span><b>Champions League</b>
Alongside of the Dutch football leagues, you can also predict for the Champions League.</span>

						<div class="page-home-row-btn">Predict Champions League</div>
					</div>
				</div>
			</div>
		</div>

		<div class="page-clear"></div>
	</div>

</div>
<div class="footer">
	<div class="footer-container">
		<div class="footer-menu">
			<ul class="nav-list">
				<li class="nav-item"><span>About us</span></li>
				<li class="nav-item"><a href="#">Frequently asked questions</a></li>
				<li class="nav-item"><a href="#">Terms of use</a></li>
				<li class="nav-item"><a href="#">Contact us</a></li>
				<li class="nav-item"><a href="#">Privacy statement</a></li>
			</ul>
			<ul class="nav-list">
				<li class="nav-item"><span href="#">Our competitions</span></li>
				<li class="nav-item"><a href="#">Eredivisie</a></li>
				<li class="nav-item"><a href="#">Champions League</a></li>
				<li class="nav-item"><a href="#">Top League</a></li>
			</ul>
			<ul class="nav-list">
				<li class="nav-item"><span href="#">Copyright © 2013</span></li>
				<li class="nav-item-logo"></li>
			</ul>
			<div class="social-list">
				<div class="social-title">Follow us</div>
				<div class="social-item facebook"></div>
				<div class="social-item twitter"></div>
			</div>
		</div>
	</div>
</div>

<div class="popup undisplayed" id="login-popup">
	<div class="popup-container">
		<div class="popup-form">
			<div class="page-cont-title">
				<span class="cont-title-bold">Login</span><span class="cont-title-sub">Sub text</span>
				<span class="popup-btn-close" id="popup-btn-login-close"></span>
			</div>
			<div class="page-cont-title-sub">
				<span class="cont-title-sub"></span>
				<i class="sub1"></i>
			</div>
			<div class="user-item-avatar-panel default">
				<span class="user-avt default"></span>

			</div>
			<div class="popup-mess-row"><i class="bullet"></i>
				<span> Log in with your email address or </span>
				<a class="popup-link" id="btn-expand-register">create an account.</a>
			</div>
			<div class="popup-input-row"><span>Email</span><input type="text"/></div>
			<div class="popup-input-row"><span>Password</span><input type="password"/></div>
			<div class="popup-btn-row">
				<a class="popup-btn-forgot" href="#"><i class="bullet red"></i><span> Forgot your password?</span></a>
				<a class="popup-btn-login" href="#">Login</a>
			</div>
			<span class="popup-error-mess"><i></i> Password is not correct!</span>
			<span class="loading-spin undisplayed"></span>
		</div>
		<div class="popup-bottom"></div>
	</div>
</div>

<div class="popup undisplayed" id="register-popup">
	<div class="popup-container">
		<div class="popup-form">
			<div class="page-cont-title">
				<span class="cont-title-bold">Register</span><span class="cont-title-sub">Sub text</span>
				<span class="popup-btn-close" id="popup-btn-register-close"></span>
			</div>
			<div class="page-cont-title-sub">
				<span class="cont-title-sub"></span>
				<i class="sub0"></i>
			</div>
			<span class="popup-error-mess"><i></i> Input is not correct!</span>

			<div class="popup-input-row"><span>Name</span><input type="text"/></div>
			<div class="popup-input-row"><span>Email</span><input type="text"/></div>
			<div class="popup-input-row"><span>Confirm</span><input type="text" placeholder="email"/></div>
			<div class="popup-input-row"><span>Password</span><input type="password"/></div>
			<div class="popup-input-row"><span>Confirm</span><input type="password" placeholder="password"/></div>
			<div class="popup-btn-row">
				<a class="popup-btn-login" id="btn-register" href="#">Register</a>
			</div>
			<span class="loading-spin undisplayed"></span>
		</div>
		<div class="popup-bottom"></div>
	</div>
</div>
</div>

</body>
</html>
